import React, { useEffect, useState } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { Table, Spin, Button, Modal, Input, Col, Row } from "antd";
import { deleteList, editList, fetchList } from "./listSlice";
const Home = () => {
  const loading = useAppSelector((state) => state.list.loading);
  const list = useAppSelector((state) => state.list.list);
  const dispatch = useAppDispatch();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [currItem, setCurrItem] = useState({
    name: "1",
    title: "2",
    sex: "3",
    tel: "4",
    address: "5",
    id: "6",
  });
  const columns = [
    {
      title: "id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "地址",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "性别",
      dataIndex: "sex",
      key: "sex",
    },
    {
      title: "电话",
      dataIndex: "tel",
      key: "tel",
    },
    {
      title: "操作",
      render(_: any) {
        return (
          <div>
            <Button
              type="primary"
              danger
              onClick={() => {
                Modal.confirm({
                  title: "警告",
                  content: "确定要删除吗？",
                  onOk() {
                    dispatch(deleteList(_.id));
                  },
                });
              }}
            >
              删除
            </Button>
            <Button
              type="primary"
              onClick={() => {
                setIsModalVisible(true);
                setCurrItem(_);
              }}
            >
              编辑
            </Button>
          </div>
        );
      },
    },
  ];

  const handleOk = () => {
    setIsModalVisible(false);
    dispatch(editList(currItem))
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  useEffect(() => {
    dispatch(fetchList());
  }, []);

  return (
    <div>
      <Spin spinning={loading}>
        <Table
          dataSource={list}
          columns={columns}
          rowKey={(item) => item.id}
        ></Table>
      </Spin>

      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Row>
          <Col span={4}>
            <span>姓名：</span>
          </Col>
          <Col span={16}>
            <Input
              value={currItem.name}
              onChange={(e) => {
                setCurrItem((data) => {
                  return {
                    ...data,
                    name: e.target.value,
                  };
                });
              }}
            ></Input>
          </Col>
        </Row>

        <Row>
          <Col span={4}>
            <span>电话：</span>
          </Col>
          <Col span={16}>
            <Input
              value={currItem.tel}
              onChange={(e) => {
                setCurrItem((data) => {
                  return {
                    ...data,
                    tel: e.target.value,
                  };
                });
              }}
            ></Input>
          </Col>
        </Row>

        <Row>
          <Col span={4}>
            <span>地址：</span>
          </Col>
          <Col span={16}>
            <Input
              value={currItem.address}
              onChange={(e) => {
                setCurrItem((data) => {
                  return {
                    ...data,
                    address: e.target.value,
                  };
                });
              }}
            ></Input>
          </Col>
        </Row>

        <Row>
          <Col span={4}>
            <span>性别：</span>
          </Col>
          <Col span={16}>
            <Input
              value={currItem.sex}
              onChange={(e) => {
                setCurrItem((data) => {
                  return {
                    ...data,
                    sex: e.target.value,
                  };
                });
              }}
            ></Input>
          </Col>
        </Row>

        <Row>
          <Col span={4}>
            <span>标题：</span>
          </Col>
          <Col span={16}>
            <Input
              value={currItem.title}
              onChange={(e) => {
                setCurrItem((data) => {
                  return {
                    ...data,
                    title: e.target.value,
                  };
                });
              }}
            ></Input>
          </Col>
        </Row>
      </Modal>
    </div>
  );
};
export default Home;
